// import 'react-app-polyfill/ie11';
// import 'react-app-polyfill/stable';

import React from "react";
import ReactDOM from "react-dom";

import MouseTracker from './MouseDemo/MouseTracker';

import Example from './HookDemo/Example';
import WrapFriendStatus from './HookDemo/FriendStatus';

import ChangeSizeTest from './ScreenHookDemo/ChangeSizeTest'


// import Button from '@kedacom/mo-react/dist/button';

// import { Hello as MHello } from "teach_wmg_21";
import { Hello, Button, SpaceWraper, Table, DemoCard, Input, Modal } from "@teach_wmg_21";
import { Hello as NPMHello } from "teach_wmg_21";

import ComTest from './ComTest'

import A from './HOC/A';
import B from './HOC/B';
import C from './HOC/C';

console.log(SpaceWraper, "==========SpaceWraper=========")

import './index.scss';

ReactDOM.render(
    <div>
        {/* <Button>npm方式引用的组件库@kedacom/mo-react</Button>
        <Button>npm方式引用的组件库@kedacom/mo-react</Button> */}

        {/* <MouseTracker></MouseTracker> */}


        <DemoCard title="高阶封装">

            <SpaceWraper>
                <A />
                <B />
                <C />
            </SpaceWraper>

        </DemoCard>



        <DemoCard title="Input">

            <SpaceWraper>
                <ComTest />
            </SpaceWraper>




        </DemoCard>



        <div style={{ marginTop: '10px' }}></div>

        <SpaceWraper direction="horizontal">

            <DemoCard title="测试effect清除">
                <WrapFriendStatus />
            </DemoCard>


            <DemoCard title="hook">
                <ChangeSizeTest />
            </DemoCard>
        </SpaceWraper>

        <div style={{ marginTop: '10px' }}></div>

        <SpaceWraper direction="horizontal">

            <DemoCard title="hook">
                <Example />
            </DemoCard>





            <DemoCard title="表格">
                <Button className="my_btn" onClick={() => alert(0)}>确定</Button>
            </DemoCard>


            <DemoCard title="表格">
                <Button className="my_btn" onClick={() => alert(0)}>确定</Button>
            </DemoCard>
        </SpaceWraper>
        <div style={{ marginTop: '10px' }}></div>

        <SpaceWraper direction="vertical">


            <DemoCard title="表格">
                <SpaceWraper>
                    <Button className="my_btn" onClick={() => alert(0)}>确定</Button>
                    <Button className="my_btn" onClick={() => alert(0)}>确定</Button>
                </SpaceWraper>
                <div style={{ marginTop: '10px' }}></div>
                <SpaceWraper>
                    <Button className="my_btn" onClick={() => alert(0)}>确定</Button>
                    <Button className="my_btn" onClick={() => alert(0)}>确定</Button>
                </SpaceWraper>
            </DemoCard>



            <DemoCard title="表格">
                <Table></Table>
            </DemoCard>
        </SpaceWraper>




        {/* <Hello compiler={"Hello"} framework="React" />
        <NPMHello compiler={"NPMHello"} framework="React" /> */}


    </div>,
    document.getElementById("example")
);